import React, { useEffect, useState } from 'react';
import AxCard from '@/components/AxBase/AxCard';
import { Col, Row } from 'antd';
import Search from './components/search';
import { ChartColumn, ChartDonut } from '@/components/AxBase/AxChart';
import { AxStandardCard } from '@/components/AxList/AxStandardCard';
import { AxStandardCardButtonType, AxStandardCardFilterType } from '@/components/AxList/AxStandardLayout/data.d';
import { axurl } from '@/shared/axurl';
import { AxColumnEnum } from '@/components/AxList';

const url = axurl.fund.data;
const Index: React.FC<any> = props => {
  const { location } = props;
  const { id } = location && location.query && location.query || {};
  let axconfig: any = {
    data: [],
    title: {
      visible: true,
      text: '库存概览图',
    },
    description: {
      visible: true,
      text: '可直观所有库存数量',
    }
  };
  const [config, setConfig] = useState(axconfig);
  const [config2, setConfig2] = useState(axconfig);

  useEffect(() => {
    getChartData()
  }, []);

  useEffect(() => {
    setConfig2({
      data: [
        { text: '库存目录', value: 11 },
        { text: '物资数量', value: 22 },
        { text: '出库数量', value: 33 },
        { text: '非采购数量', value: 44 },
        { text: '报废数量', value: 55 }
      ],
      title: {
        visible: true,
        text: '库存柱状图',
      },
      description: {
        visible: true,
        text: '可直观所有库存数量',
      }
    });
  }, [])

  const getChartData = () => {
    let data = [
      { text: '库存目录', value: 1 },
      { text: '物资数量', value: 2 },
      { text: '出库数量', value: 3 },
      { text: '返库数量', value: 4 },
      { text: '非采购数量', value: 5 },
      { text: '报废数量', value: 6 }
    ];
    axconfig.data = data
    setConfig(axconfig);
  }

  /** 配置操作按钮 */
  const button: AxStandardCardButtonType[] = [
    // {
    //   type: 'create',
    //   text: '添加使用人',
    //   icon: 'plus',
    // }
  ];

  const filter: AxStandardCardFilterType[] = [];

  const handleData = (res: any) => {
    return {
      ...res,
      list: res.list.map((i: any) => ({
        id: 2,
        icon: 'user',
        desc: (
          <div className="ent-member-card__info">
            <div className="ent-member-card__name" style={{ display: 'flex' }}>
              <a className="mr-1">{i.userName}</a>&nbsp;
              <div className="ent-member-card__labels">
                <div className={`ax-manager ${i.personnelType === 2 && 'ax-user'}`}><AxColumnEnum enumName='personnelType' value={i.personnelType} /></div>
              </div>
            </div>
            <div className="ent-member-card__description">
              <span>院校ID：{i.schoolCode}</span>
            </div>
            <div className="ent-member-card__description">
              <span>联系电话：{i.mobile}</span>
            </div>
            <div className="ent-member-card__description">
              <span>累计使用：201545</span>
            </div>
          </div>
        ),
        click: () => { },
        actions: [
          {
            text: '删除',
            click: () => { },
          },
        ],
      }))
    }
  }


  return (
    <AxCard
      bodyStyle={{ padding: 0 }}
    >
      <Row gutter={15}>
        <Col span={16}>
          <AxStandardCard
            url={url}
            params={{ id: id }}
            button={button}
            filter={filter}
            // AdvancedSearch={Search}
            handleData={handleData}
            requestMethod='getDataX'
          />
        </Col>
        <Col span={8}>
          <Col span={24}>
            <Row gutter={15}>
              <Col span={24}>
                <AxCard title='统计信息'>
                  <div style={{ padding: '8px 0' }}>
                    <ChartDonut config={config} />
                  </div>
                </AxCard>
              </Col>
            </Row>
            <Row gutter={15}>
              <Col span={24}>
                <AxCard>
                  <ChartColumn config={config2} />
                </AxCard>
              </Col>
            </Row>
          </Col>
        </Col>
      </Row>
    </AxCard>
  );
};

export default Index;
